
<template>
  <div>
    <el-table
      :data="data"
      :height="height"
      border
      :header-cell-style="{ textAlign: 'center',background: '#ffffff', color: '#04172F', fontWeight: 600, fontSize: '14px', padding: '2px 0', height: '50px', lineHeight: '50px' }"
      @selection-change="handleSelectionChange"
      @row-click="rowClick">
      <el-table-column align="center" type="selection" width="50px" v-if="judgeSelect">
      </el-table-column>
      <!-- <el-table-column type="index" width="50"/> -->
      <template>
        <el-table-column
          v-for="(item, index) in column" :key="index"
          :label="item.type == 'render' ? '' : item.label"
          :show-overflow-tooltip="true"
          :width="item.width || 'auto'"
          :align="item.align || 'center'">
          <template #default="scope">
            <div v-if="item.type === 'outlineoper' && item.children&&item.children.length>3">
              <el-button
                  :type="item.children[0].type||'primary'"
                  size="small"
                  :disabled="item.disabledMethod ? item.disabledMethod(scope.row, item.children[0].oper) : false"
                  @click="(e) => tableHandler(item.children[0].oper, scope.row)">
                  {{ item.children[0].label }}
                </el-button>
                <el-button
                  :type="item.children[1].type||'primary'"
                  size="small"
                  :disabled="item.disabledMethod ? item.disabledMethod(scope.row, item.children[2].oper) : false"
                  @click="(e) => tableHandler(item.children[1].oper, scope.row)">
                  {{ item.children[1].label }}
                </el-button>
                <el-popover
              placement="bottom"
              :width="80"
              trigger="click"
              :show-arrow="false">
              <template #reference>
                <el-button type="primary" size="small">更多<el-icon><CaretBottom/></el-icon></el-button>
              </template>
              <div v-for="(t, i) in item.children" :key="i">
                <el-button
                  v-if="i!=0&&i!=1"
                  :type="t.type||'primary'"
                  size="small"
                  :disabled="item.disabledMethod ? item.disabledMethod(scope.row, t.oper) : false"
                  @click="(e) => tableHandler(t.oper, scope.row)">
                  {{ t.label }}
                </el-button>
              </div>
            </el-popover>
            </div>

            <div v-else-if="item.type === 'outlineoper' && item.children&&item.children.length<4">
              <template>
                <el-button
                  v-for="(t, i) in item.children" :key="i"
                  :type="t.type||'primary'"
                  size="small"
                  :disabled="item.disabledMethod ? item.disabledMethod(scope.row, t.oper) : false"
                  @click="(e) => tableHandler(t.oper, scope.row)"> {{ t.label }}
                </el-button>
              </template>
            </div>
            <span
              v-else>{{ item.subProp ? (scope.row[item.prop] ? scope.row[item.prop][item.subProp] || '-' : '-') : (scope.row[item.prop]
                  || scope.row[item.prop] == 0) ? scope.row[item.prop] : '-'
              }}{{ item.unit || '' }}</span>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script>
// @ is an alias to /src

export default{
  name: 'BasicTable',
  props: {
    column: {
      type: Array,
      default: () => []
    },
    data: {
      type: Array,
      default: () => []
    },
    judgeSelect: {
      type: Boolean,
      default: false
    },
    height: {
      type: Number,
      default: 500
    }
  },
  methods: {
    // 表格操作方法
    tableHandler(type, data) {
      // this.props.handler && this.props.handler(type, param)
      this.$emit('handler', { type, data })
    },
    // 选中选项发生改变调用
    handleSelectionChange(val) {
      this.$emit('handler', { type: 'checked', data: val })
      // this.props.handler && this.props.handler('checked', val)
    },
    rowClick(row, column, event) {
      this.$emit('handler', { type: 'rowClick', data: row })
    }
  }
}
</script>
<style>

.cf-table {
  font-size: 14px;
}

.cf-table td,
.cf-table th {
  padding: 3px 0;
}
</style>
